@import 'table.scss';
.emergency{
	.cha{
		width: 9px;
		height: 9px;
		cursor: pointer;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.main-section{
		width:100%;
		height: calc(50% - 18px );
		margin-bottom: 18px;
		background: url(../img/paifang.png) center no-repeat;
		background-size: 100% 100%;
		.card{
			display: flex;
		    height: 36px;
		    align-items: center;
		    justify-content: space-between;
		    font-weight: 300;
			.card-span{
				font-size: 14px;
				color: #FFFFFF;
				font-weight: 500px;
				margin-left: 20px;
				margin-top: 10px;
			}
			
		}
		.charts-box{
			height: calc(100% - 40px);
			width: 100%;
			overflow: hidden;
		}
		.meter{
			width: 65px;
			height: 17px;
			font-size: 12px;
			font-weight: 400;
			color: #7DA6EF;
			margin-left: 40px;
			margin-top: 10px;
		}
		.chart{
			width: 100%;
			height:100%;
		}
	}
	.up-box{
		height: 50%;
		width: 100%;
	.round-box{
		width:calc(50% - 10px );
		margin-right: 10px;
		height: 100%;
		background: url("../img/bg-data-card.png") no-repeat;
		background-size:100% 100%;
		.card{
			height: 36px;
			color:#fff;
			line-height: 36px;
			padding-left:10px;
		}
		#echart{
			margin-right: 50px;
			width: 30%;
			height: 90%;
		}
		.information{
			width: 20%;
			height: 70%;
			margin-right: 30px;
			z-index: 1;
			.information-li{
				flex-direction: column;
				margin-top: 10px;
			}
			.information-span{
				color: #FFFFFF;
				font-size: 30px;
				font-weight: 500;
				padding-top: 5px;
			}
			
			.information-icon{
				width: 12px;
				height: 12px;
				background: #0081FF;
				border: 1px #064678 solid ;
				border-radius: 50%; 
				margin-right:10px;
				display: block;
				cursor: pointer;
			}
			.information-iconbule{
				width: 12px;
				height: 12px;
				background: #025A68;
				border: 1px #025A68 solid ;
				border-radius: 50%; 
				margin-right:10px;
				display: block;
				cursor: pointer;
			}
			.information-iconzi{
				width: 12px;
				height: 12px;
				background: #6648FF;
				border: 1px #6648FF solid ;
				border-radius: 50%; 
				margin-right:10px;
				display: block;
				cursor: pointer;
			}
			.information-span2{
				font-size: 14px;
				font-weight: 400;
				color: #C2C2C2;
			}
		}
		.shuju{
			width: 50%;
			height: 90%;
			.emepng{
				margin-top: 50px;
				width: 337px;
				height: 64px;
				background: url(../img/emergency.png);
				background-size: 100% 100%;
				line-height: 64px;
				justify-content: space-around;
				.emepng-1{
					font-size: 16px;
					font-weight: 400;
					color: #7DA8FF;
				}
				.emepng-2{
					font-size: 16px;
					font-weight: 400;
					color:  #28B4FF;
					line-height: 22px;
					margin-right: 103px;
				}
				.emepog-3{
					display: block;
					width: 30px;
					height: 30px;
				background: url(../img/emepog.png);
					background-size: 100% 100%;
					
				}
				.emepog-4{
					display: block;
					width: 30px;
					height: 30px;
				background: url(../img/emepogs.png);
					background-size: 100% 100%;
					
				}
			}
		}
	}
	.tale-box{
		width:50%;
		height: 100%;
		padding: 0 10px;
		margin-right: 0;
		
		.card-content{
			font-size: 14px;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 20px;
			  width: 100%;
			  height: calc(100% - 40px);
			  thead{
				width: 100%;
			  	height: 30px;
			  	text-align: center;
			  }
			  
			.colocorange{
				color: #E06700;
			}
			.cologreen{
				color: #4EE000;
			}
			 
		}
	}
	}
}
